<template>
    <!-- 2. 用户购买的所有商品 -->
    <div class="shopping-cart-item">
        <div class="shopping-cart-item-center">
            <ul>
                <li>
                    <div class="cart-top clearFix">
                        <input type="radio" class="fl" />
                        <h1 class="fl">{{ name }}</h1>
                    </div>
                    <div class="cart-bottom clearFix">
                        <input type="radio" class="sel_input fl" />
                        <div class="shop-show-pic">
                            <a href="javascript:;">
                                <img src="/images/productImage_01.png" alt="商品展示小缩略图" title="商品展示小缩略图" />
                            </a>
                        </div>
                        <div class="shop-info">
                            <h2>金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1</h2>
                            <span class="type">固态电池</span>
                            <div class="shop-detail-info clearFix">
                                <span class="fl">￥569.00</span>
                                <div class="shop-num fr clearFix">
                                    <a class="minus" href="javascript:;"></a>
                                    <em>1</em>
                                    <a class="plus" href="javascript:;"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-bottom clearFix">
                        <input type="radio" class="sel_input fl" />
                        <div class="shop-show-pic">
                            <a href="javascript:;">
                                <img src="/images/productImage_01.png" alt="商品展示小缩略图" title="商品展示小缩略图" />
                            </a>
                        </div>
                        <div class="shop-info">
                            <h2>金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1</h2>
                            <span class="type">固态电池</span>
                            <div class="shop-detail-info clearFix">
                                <span class="fl">￥569.00</span>
                                <div class="shop-num fr clearFix">
                                    <a class="minus" href="javascript:;"></a>
                                    <em>1</em>
                                    <a class="plus" href="javascript:;"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-bottom clearFix">
                        <input type="radio" class="sel_input fl" />
                        <div class="shop-show-pic">
                            <a href="javascript:;">
                                <img src="/images/productImage_01.png" alt="商品展示小缩略图" title="商品展示小缩略图" />
                            </a>
                        </div>
                        <div class="shop-info">
                            <h2>金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1</h2>
                            <span class="type">固态电池</span>
                            <div class="shop-detail-info clearFix">
                                <span class="fl">￥569.00</span>
                                <div class="shop-num fr clearFix">
                                    <a class="minus" href="javascript:;"></a>
                                    <em>1</em>
                                    <a class="plus" href="javascript:;"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-bottom clearFix">
                        <input type="radio" class="sel_input fl" />
                        <div class="shop-show-pic">
                            <a href="javascript:;">
                                <img src="/images/productImage_01.png" alt="商品展示小缩略图" title="商品展示小缩略图" />
                            </a>
                        </div>
                        <div class="shop-info">
                            <h2>金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1金瑞玛固态电池 - 电池型号JRM-GC-1</h2>
                            <span class="type">固态电池</span>
                            <div class="shop-detail-info clearFix">
                                <span class="fl">￥569.00</span>
                                <div class="shop-num fr clearFix">
                                    <a class="minus" href="javascript:;"></a>
                                    <em>1</em>
                                    <a class="plus" href="javascript:;"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'shopping-cart-item',
        // 接收父级传递过来的数据
        props: {
            'name': {
                type: String,
                required: true
            }
        },
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {

            };
        },
        methods: {

        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss">
    .yes-product {
        width: 100%;
        padding-bottom: 428px;
    }

</style>

<style lang="scss" scoped>
    .cart-all-shop {
        .shopping-cart-item {
            background-color: #fff;
            margin: 20px !important;
            border-radius: 10px;

            input {
                -webkit-appearance: none;
            }

            .shopping-cart-item-center {
                padding: 30px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;

                ul {
                    li {
                        .cart-top {
                            margin-bottom: 45px;

                            input {
                                display: block;
                                width: 24px;
                                height: 24px;
                                background: url(/images/select_circle_ico.png) no-repeat;
                                background-size: 24px 24px;
                                margin-top: 2px;
                            }

                            h1 {
                                font-weight: normal;
                                font-size: 24px;
                                color: #333;
                                padding: 0 30px 0 38px;
                                box-sizing: border-box;
                                -webkit-box-sizing: border-box;
                                margin-left: 20px;
                                position: relative;

                                &::before,
                                &::after {
                                    position: absolute;
                                    z-index: 1;
                                }

                                &::before {
                                    content: '';
                                    left: 0;
                                    top: 4px;
                                    width: 27px;
                                    height: 24px;
                                    background: url(/images/wf_ico.png) no-repeat -285px -20px;
                                    background-size: 834px 535px;
                                }

                                &::after {
                                    content: '';
                                    right: 0;
                                    top: 4px;
                                    width: 14px;
                                    height: 23px;
                                    background: url(/images/wf_ico.png) no-repeat -299px -122px;
                                    background-size: 834px 535px;
                                }
                            }
                        }

                        .cart-bottom {
                            padding: 25px 0!important;
                            box-sizing: border-box;
                            -webkit-box-sizing: border-box;

                            .sel_input {
                                float: left;
                                width: 24px;
                                height: 24px;
                                background: url(/images/select_circle_ico.png) no-repeat;
                                background-size: 24px 24px;
                                margin-top: 50px;
                            }

                            .shop-show-pic {
                                margin: 0 30px 0 20px;
                                float: left;

                                a {
                                    float: left;
                                    width: 140px;

                                    img {
                                        float: left;
                                        width: 100%;
                                        height: 140px;
                                    }
                                }
                            }

                            .shop-info {
                                float: left;
                                width: 416px;
                                position: relative;
                                top: -10px;

                                h2 {
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-weight: bold;
                                    font-size: 24px;
                                    line-height: 36px;
                                    color: #333;
                                    margin-top: 2px;
                                }

                                .type {
                                    display: block;
                                    width: 110px;
                                    height: 40px;
                                    background-color: #f9f9f9;
                                    font-weight: normal;
                                    font-size: 22px;
                                    line-height: 40px;
                                    color: #999;
                                    border-radius: 8px;
                                    text-align: center;
                                    margin-top: 8px;
                                }

                                .shop-detail-info {
                                    margin-top: 10px;

                                    span {
                                        display: block;
                                        font-weight: normal;
                                        font-size: 24px;
                                        color: #fe4545;
                                    }

                                    .shop-num {

                                        em,
                                        a {
                                            float: left;
                                        }

                                        a {
                                            width: 40px;
                                            height: 30px;
                                            border: 1px solid #bbb;
                                            box-sizing: border-box;
                                            -webkit-box-sizing: border-box;
                                            position: relative;

                                            &:first-of-type {
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    left: 13px;
                                                    top: 13px;
                                                    z-index: 1;
                                                    width: 12px;
                                                    height: 2px;
                                                    background: url(/images/minus_ico.png) no-repeat;
                                                    background-size: 12px 2px;
                                                }
                                            }

                                            &:last-of-type {
                                                &::before {
                                                    content: '';
                                                    position: absolute;
                                                    left: 13px;
                                                    top: 8px;
                                                    z-index: 1;
                                                    width: 12px;
                                                    height: 12px;
                                                    background: url(/images/plus_ico.png) no-repeat;
                                                    background-size: 12px 12px;
                                                }
                                            }
                                        }

                                        em {
                                            width: 40px;
                                            height: 30px;
                                            border: 1px solid #bbb;
                                            box-sizing: border-box;
                                            -webkit-box-sizing: border-box;
                                            border-radius: 0;
                                            border-left: 0 none;
                                            border-right: 0 none;
                                            font-weight: normal;
                                            font-size: 22px;
                                            line-height: 30px;
                                            color: #666;
                                            text-align: center;
                                        }
                                    }
                                }
                            }
                        }

                        &:first-of-type {
                            .cart-bottom {
                                padding-top: 0!important;
                            }
                        }

                        &:first-of-type {
                            .cart-bottom:last-of-type {
                                padding-bottom: 5px!important;
                            }
                        }
                    }
                }
            }
        }
    }

</style>
